<!-- 团队报名-邀请学员 -->
<template>
	<view class="container">
		<!-- 时间进度 -->
		<view class="wrap">
			<u-time-line-item nodeTop="2" style="color:#4EE7DA ;">
				<template v-slot:node>
					<span style="font-size: 14px;">√</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc"  style="color:#4EE7DA;">填写联系人信息</view>		
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="2">
				<template v-slot:node>
					<span style="font-size: 14px;">②</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">邀请学员报名(选择报考等级，是否培训，上传资料)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">③</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认报名人数，并提交审核(报名截止时自动提交)</view>
					</view>
				</template>
			</u-time-line-item>
			<u-time-line-item nodeTop="0">
				<template v-slot:node>
					<span style="font-size: 14px;">④</span>
				</template>
				<template v-slot:content>
					<view>
						<view class="u-order-desc">确认费用并支付(优惠政策请联系客服)</view>
					</view>
				</template>
			</u-time-line-item>
		</view>
		
		<!-- 内容 -->
		<view class="invitation-container">
		  <!-- 顶部企业名称和考证名称 -->
		  <view class="header">
		    <text class="company-name">{{ companyName }}</text>
		    <text class="exam-name">邀请报名"{{ examName }}"</text>
		  </view>
		  
		  <!-- 邀请链接部分 -->
		  <view class="invitation-section">
		    <!-- <text class="section-title">邀请链接</text> -->
		    <view class="qrcode-box">
		      <u-image 
		        :src="qrcodeUrl" 
		        width="100rpx" 
		        height="100rpx" 
		        mode="aspectFit"
		      ></u-image>
		    </view>
				<!-- 分享邀请码部分 -->
				<view class="invitation-but">
					<u-button
					  type="default" 
					  shape="circle" 
					  @click="copyInvitationQrCode"
					  class="copy-btn"
						:custom-style="btuStyle"
					>
					  分享邀请码
					</u-button>
				  <u-button 
				    type="default" 
				    shape="circle" 
				    @click="copyInvitationLink"
				    class="copy-btn"
						:custom-style="btuStyle"
				  >
				    复制邀请链接
				  </u-button>
				</view>
		  </view>
		  

		  
		  <!-- 底部备注信息 -->
		  <view class="footer-note">
		    <text>注：可在"我的-报名记录"中完成后续步骤</text>
		  </view>
		  
		  <!-- 底部操作按钮 -->
		  <view class="action-buttons">
		    <u-button 
		      plain 
					type="default" 
		      shape="circle" 
		      @click="goBack"
		      class="back-btn"
					:custom-style="footBtuStyle"
		    >
		      返回
		    </u-button>
		    <u-button 
			  	plain
		      type="default" 
		      shape="circle" 
		      @click="viewDetails"
		      class="detail-btn"
					:custom-style="footBtuStyle"
		    >
		      查看详情
		    </u-button>
		  </view>
		</view>
		
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
				btuStyle: {
					"backgroundColor": "#516178",
					"color": "#ffffff",
				},
				footBtuStyle: {
					"color": "#03B8CD",
					"border": "2rpx solid #03B8CD"
				},
	      companyName: "某某某企业名称",
	      examName: "考证名称",
	      qrcodeUrl: "/static/qrcode.png", // 替换为实际二维码图片路径
	      invitationCode: "INV123456", // 替换为实际邀请码
	      invitationLink: "https://example.com/invite/INV123456", // 替换为实际邀请链接
				kaoZhengCode: ''  ///考证的CODE
	    }
	  },
		onLoad(options) {
			this.kaoZhengCode = options.code
		},
	  methods: {
			// 分享邀请码
			copyInvitationQrCode() {
				// 获取邀请码从接口
				this.getYqMa()
			  uni.setClipboardData({
			    data: this.invitationCode,
			    success: () => {
			      uni.showToast({
			        title: '链接已复制',
			        icon: 'success'
			      });
			    }
			  });
			},
			// 从接口获取邀请码
			getYqMa() {
				this.$u.api.queryuseryqm({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('邀请码：', res)
					this.invitationCode = res.data.base_info					
				})
			},
	    // 复制邀请链接
	    copyInvitationLink() {
				// 调用接口获取返回的链接
				this.getyqmlink()
	      // uni.setClipboardData({
	      //   data: this.invitationLink,
	      //   success: () => {
	      //     uni.showToast({
	      //       title: '链接已复制',
	      //       icon: 'success'
	      //     });
	      //   }
	      // });
	    },
			// 取得并复制邀请码
			getyqmlink() {
				this.$u.api.createyqmlink({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"params":{"linkcode":this.kaoZhengCode, "ywcode":"kzbm"}, ///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
				}).then(res => {
					console.log('生成邀请链接：', res)
					this.invitationLink = res.data.base_info
					uni.setClipboardData({
					  data: this.invitationLink,
					  success: () => {
					    uni.showToast({
					      title: '链接已复制',
					      icon: 'success'
					    });
					  }
					});
				})
			},
	    // 返回上一页
	    goBack() {
	      uni.navigateBack();
	    },
	    // 查看详情
	    viewDetails() {
	      uni.navigateTo({
	        url: '/pages/Institution/record/record'
	      });
	    }
	  }
	}
</script>

<style  lang="scss" scoped>
	.container {
		padding: 10rpx;
		min-height: 100vh;
		background-color: #F1F7F7;
		
		.u-node-tip {
			margin: 10px 10px 0px 10px;
			padding: 0px;
			font-size: 18px;
		}
		
		.wrap {
			margin-left: 40px;
			padding: 24rpx 24rpx 24rpx 0;
		}
		
		/deep/ .u-time-axis-item {
			margin-bottom: 0px;
		}
		
		.circle-number {
			display: inline-flex;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: #55ff7f;
			color: white;
			justify-content: center;
			align-items: center;
			font-size: 14px;
		}
		
		.u-node {
			width: 44rpx;
			height: 44rpx;
			border-radius: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}		

		.u-order-desc {
			color: #333333;
			font-size: 28rpx;
		}		
		
		// 内容
		.invitation-container {
		  padding: 40rpx;
		  min-height: 100vh;
		  background-color: #F1F7F7;			
		  display: flex;
		  flex-direction: column;
		}
		
		.header {
		  margin-bottom: 40rpx;
		  text-align: center;
		  
		  .company-name {
		    font-size: 36rpx;
		    font-weight: bold;
		    color: #333;
		    display: block;
		    margin-bottom: 10rpx;
		  }
		  
		  .exam-name {
		    font-size: 30rpx;
		    color: #666;
		  }
		}
		
		.invitation-section {
		  // background-color: #fff;
			// 邀请码背景
			// background-image: url('@/static/bg_yaoqingma.png');
		  border-radius: 12rpx;
		  padding: 30rpx;
		  // margin-bottom: 30rpx;
			height: 664rpx;
		  
		  .qrcode-box {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    padding: 20rpx;
		    background-color: #F1F7F7;
		    border-radius: 8rpx;
				height: 166px;
				width: 166px;
				margin: 45px  75px;
		  }
		  
		  .code-box {
		    background-color: #F1F7F7;
		    padding: 20rpx;
		    border-radius: 8rpx;
		    margin-bottom: 20rpx;
		    text-align: center;
		    
		    .invitation-code {
		      font-size: 32rpx;
		      font-weight: bold;
		      color: #2979ff;
		    }
		  } 
		}
		.invitation-but {
			display: flex;
			justify-content: space-between;
			// background-color: #fff;
			margin-bottom: 30rpx;

			.copy-btn {
			  margin-top: 20rpx;
				width: 48%;
			}
		}
		
		.footer-note {
		  font-size: 30rpx;
			font-weight: bold;
		  color: #999;
		  text-align: left;
		  margin: 30rpx 0;
		}
		
		.action-buttons {
		  display: flex;
		  justify-content: space-between;
		  margin-top: 20rpx;
		  
		  .back-btn {
		    width: 48%;
		  }
		  
		  .detail-btn {
		    width: 48%;
		  }
		}
		
	}
</style>